<template>
  <view >
    <!-- 自定义搜索组件 -->
    <my-search @click.native="toSearchFn"></my-search>
    <view class="con" :style="{height: wh + 'px'}">
        <!-- 左侧一级分类区域 -->
        <scroll-view scroll-y="true" class="left_con">
          <view :class="['left_item', inx === activeInx ? 'active' : '']" @click="leftChangeFn(inx)" v-for="(item, inx) in cateList" :key="inx">
              {{item.cat_name}}
          </view>
        </scroll-view>
        <!-- 右侧主体内容区 -->
        <scroll-view scroll-y="true" class="right_con" :scroll-top="scrollTop">
          <!-- 二级分类区域 -->
          <view class="two_cate" v-for="(item2,inx2) in twoCateList" :key="inx2">
            <!-- 二级分类标题 -->
            <view class="cate_title">
              /{{item2.cat_name}}/
            </view>
            <!-- 二级分类列表 -->
            <view class="two_cate_view">
              <view class="two_cate_view_con" v-for="(item3,inx3) in item2.children" @click="toGoodsListFn(item3)">
                <image :src="item3.cat_icon" mode=""></image>
                <text>{{item3.cat_name}}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 当前设备高度
        wh: 0,
        // 分类列表数组
        cateList: [],
        // 侧边栏选中项
        activeInx: 0,
        // 二级分类列表
        twoCateList: [],
        // 分类列表距离顶部距离
        scrollTop: 0
      }
    },
    onLoad() {
      // 获取当前设备高度
      this.wh = uni.getSystemInfoSync().windowHeight - 50
      // 获取分类数据
      this.getCateList()
      // 初始化二级分类
      
    },
    methods:{
      // 获取分类信息列表
      async getCateList(){
        const {data} = await uni.$http.get('/api/public/v1/categories')
        // 请求失败！
        if(data.meta.status !== 200) return uni.$showMsg()
        // 转存数据
        this.cateList = data.message
        // 初始化二级分类
        this.twoCateList = this.cateList[0].children
      },
      // 点击左侧分类按钮
      leftChangeFn(inx){
        this.activeInx = inx
        this.twoCateList = this.cateList[inx].children
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      // 点击三级分类跳转到商品列表页
      toGoodsListFn(item){
        // 编程式导航
        uni.navigateTo({
          url:`/subpkg/goods_list/goods_list?cid=${item.cat_id}`
        })
      },
      // 点击去往搜索页面函数
      toSearchFn(){
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
  .con {
    display: flex;

    .left_con {
      width: 120px;

      .left_item {
        line-height: 60px;
        background-color: #f7f7f7;
        text-align: center;
        font-size: 12px;

        &.active {
          position: relative;
          background-color: #FFFFFF;
          &::before {
            position: absolute;
            content: '';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #C00000;
            left: 0;
            top: 50%;
            transform: translateY(-50%);

          }
        }
      }
    }

    .right_con {
      .cate_title {
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        padding: 15px 0;
      }
      .two_cate_view {
        display: flex;
        flex-wrap: wrap;
        .two_cate_view_con {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 10px;
          image {
            width: 60px;
            height: 60px;
          }
          text {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
